<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            font-size: 10px;
        }
        .container{
            display: flex;

        }
        .box{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            justify-content: center;
            align-items: center;
            box-shadow: 1px 2px 5px 1px #b3dfea ;

        }
        .item{
            border-radius: 1.3rem;
            width: 2.6rem;
            height: 2.6rem;
            background-color: #111111;
        }
        .item:nth-child(4){
            order:-1;
        }
        .two{
            display: flex;
            margin: 0 5px;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }
        .two > .item{
            border-radius: 1rem;
            width: 2rem;
            height: 2rem;
            background-color: #111111;
              }
        .three{
            display: flex;
            margin: 0 5px;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }
        .three > .item{
            border-radius: 0.8rem;
            width: 1.6rem;
            height: 1.6rem;
            background-color: #111111;
        }
        .three > .item:nth-child(1){
            align-self: flex-start;
        }
        .three > .item:nth-child(3){
            align-self: flex-end;
        }

        .four{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }
        .four > .item{
            border-radius: 0.8rem;
            width: 1.6rem;
            height: 1.6rem;
            background-color: #111111;
        }

        .five{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }

        .five > .item{
            border-radius: 0.8rem;
            width: 1.6rem;
            height: 1.6rem;
            background-color: #111111;
        }
        .five > .item:nth-child(2){
            margin: 0 1rem;
        }



        .six{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }
        .six > .item{
            border-radius: 0.8rem;
            width: 1.6rem;
            height: 1.6rem;
            background-color: #111111;
        }

        .seven{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }
        .seven > .item{
            border-radius: 0.7rem;
            width: 1.4rem;
            height: 1.4rem;
            background-color: #111111;
        }
        .seven > .item:nth-child(4){
            margin: 0 2rem 0 0;
        }
        .seven > .item:nth-child(1){
            margin: -0.5rem 1rem;
        }
        .seven > .item:nth-child(2){
            margin: 0 0 0 2rem;
        }


        .eight{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;
        }
        .eight > .item{
            border-radius: 0.7rem;
            width: 1.4rem;
            height: 1.4rem;
            background-color: #111111;
        }



        .nine{
            display: flex;
            margin: 0 5px;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            height: 6rem;
            width: 4rem;
            border-radius: 5px;
            border: #575656 solid 1px;
            box-shadow: 1px 2px 5px 1px #b3dfea ;

        }
        .nine > .item{
            border-radius: 0.6rem;
            width: 1.2rem;
            height: 1.2rem;
            background-color: #111111;
        }

        .tiao{
            margin-top: 12px;
            position: relative;
        }
        .tiao::after{
            content: "M";
            position: absolute;
            /*display: block;*/
            transform:rotate(180deg);
            top: -9px;
            left: 0;
        }
        /*.tiao::before{*/
        /*    content: "M";*/
        /*}*/


    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="item"></div>
        </div>
        <div class="two">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="three">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="four">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>

        <div class="five">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>


        <div class="six">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>


        <div class="seven">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>


        <div class="eight">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>


        <div class="nine">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>


    </div>

<div>
    <div class="tiao">M</div>
</div>

</body>
</html>